<template>
	<view class="message">
		<view v-if="msgList.length">
			<uni-swipe-action>
				<uni-swipe-action-item v-for="(item,index) in msgList" :key="index" :right-options="options"
					@click="handleDelete($event,item)">
					<view class="msgContent">
						<view :class="{readed:item.status === 'true'}" @click="toDetail(item)">
							您有一条新的待处理的订单
						</view>
						<view style="display: flex;justify-content: flex-end;width: 100%;font-size: 24rpx;"
							:class="{readed:item.status === 'true'}">{{item.datetime}}
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class="noData" v-else>暂时没有消息哦！</view>
	</view>
</template>

<script>
	export default {
		name: "Message",
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				msgList: []
			}
		},
		onShow() {
			this.getMessageList()
		},
		onPullDownRefresh() {
			this.getMessageList()
		},
		methods: {
			// 获取消息列表
			async getMessageList() {
				if (!this.phone) return
				try {
					const {
						data
					} = await this.request("getMessageList", {
						phone: this.phone
					})
					console.log(data)
					this.msgList = data.data
					this.msgCount = data.count
					if (this.msgCount) {
						wx.setTabBarBadge({
							index: 1,
							text: `${this.msgCount}`
						})
					} else {
						wx.removeTabBarBadge({
							index: 1
						})
					}
				} catch (e) {
					console.log(e)
				}
			},
			// 删除操作
			async handleDelete(e, item) {
				try {
					await this.request("messageDelete", {
						messageId: item.messageId
					})
					uni.showToast({
						title: "操作成功",
						success: () => {
							this.getMessageList()
						}
					})
				} catch (e) {
					console.log(e)
				}
			},
			// 跳转详情
			async toDetail(item) {
				try {
					await this.request("messageReaded", {
						messageId: item.messageId
					})

					uni.navigateTo({
						url: `/pages/orderDetail/orderDetail?orderId=${item.orderId}`
					})
				} catch (e) {
					console.log(e)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message {
		padding: 30rpx 60rpx;

		.msgContent {
			display: flex;
			flex-direction: column;
			font-size: 30rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;
		}

		/* 已读 */
		.readed {
			color: #b2b2b2;
		}

		.noData {
			text-align: center;
		}
	}
</style>
